<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React</title>
</head>

<body>
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!-- 引入react-dom库 -->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!-- 引入babel 转换jsx的库 -->
    <script type="text/javascript" src="./js/babel.min.js"></script>

    <script type="text/babel">/* 此处要写babel */
        // const VDOM = <div>hello world</div>
        const VDOM = (
            <div>
                <span>
                    hello React!
                </span>
            </div>
        )
        // const VDOM = React.createElement('div', null, 'hello world')
        // // 渲染虚拟DOM
        // ReactDOM.render(VDOM, document.getElementById('test'))

        // 推荐用ReactDOM.createRoot

        const root = ReactDOM.createRoot(document.getElementById('test'));
        root.render(VDOM);

        // // 创建虚拟DOM
        // class App extends React.Component {
        //     render() {
        //         return (
        //             <div>
        //                 <div>name:{this.props.name}</div>
        //                 <div>age:{this.props.age}</div>
        //             </div>
        //         )
        //     }
        // }
        // const VDOM = <App name="Ken" age={18} />

        // // ReactDOM.render 不再支持
        // ReactDOM.render(VDOM, document.getElementById('test'))

    </script>
</body>

</html>